<script>
export default {
  name: "afterSalesRequest",
  data(){
    return {
      goods: [
        {
          name: '乐心手环5S',
          spec: '标准版',
          num:1,
          price:5,
          image:'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/%E5%95%86%E5%9F%8E/u3904.png',
        }
      ],
      order:{

      },
      requestType:['refund','exchange'],
      requestIndex:0,
      reasons: ['质量问题', '发错货', '七天无理由'],
      reasonIndex: -1, // 当前选中的原因索引
      description: '', // 退款说明
      refundAmount: '298.00',
      chooseType:'退款',
    }
  },
  methods:{
    onReasonChange(e) {
      this.reasonIndex = e.detail.value
    },
    onRequestChange(e) {
      this.requestIndex = e.detail.value
      if (this.requestIndex == 0){
        this.chooseType = '退款'
      }else if (this.requestIndex == 1){
        this.chooseType = '换货'
      }
    },
    handleSubmit() {
      if (this.reasonIndex === -1) {
        uni.showToast({
          title: '请选择'+this.chooseType+'原因',
          icon: 'none'
        })
        return
      }
      const userInfo = uni.getStorageSync('userInfo');

      const formData = {
        orderId:this.order.id,
        userId:userInfo.id,
        requestType:this.requestType[this.requestIndex],
        requestReason: this.reasons[this.reasonIndex] +":"+this.description,
        amount: this.refundAmount
      }

      console.log(formData)

      // // 这里调用提交接口
      uni.request({
        url:'http://localhost:8080/app/shop/after_sales_requests',
        method: 'POST',
        data:formData,
        success:res =>{
          console.log(res)
          if (res.statusCode == 200){
            // uni.showToast({
            //   title: '提交成功',
            //   icon: 'success'
            // })
            // 显示弹窗
            uni.showModal({
              title: "操作成功",
              content: "即将返回上一页",
              showCancel: false,
              success: (res) => {
                if (res.confirm) {
                  // 关闭弹窗后返回上一页
                  uni.navigateBack({
                    delta: 1, // 返回层数（1表示上一页）
                    animationType: "pop-out", // 可选动画效果
                    animationDuration: 300   // 可选动画时长
                  });
                }
              }
            });
          }
        }
      })
      // console.log('提交数据：', formData)
      // uni.showToast({
      //   title: '提交成功',
      //   icon: 'success'
      // })


    },

    // 处理图片路径（拼接完整URL）
    getImageUrl(path) {
      // return path.startsWith('http') ? path : `https://your-domain.com${path}`;
      return path;
    },
  },
  onLoad (option) {
    let order = JSON.parse(option.order)
    console.log(order); // 打印出上个页面传递的参数。
    this.order.id = order.id;
    this.goods = order.shopOrderDetailList;
    this.refundAmount = 0;
    this.goods.forEach(item =>{
      this.refundAmount = this.refundAmount+ item.num*item.price
    })
    console.log(this.refundAmount)
  }
}
</script>

<template>
  <view class="container">
    <!-- 商品信息 -->
    <view class="goods-section">
      <view class="goods-item" v-for="(item,index) in goods">
        <text class="goods-name">{{item.name}}</text>

          <text class="goods-spec">{{item.spec}} * {{item.num}}</text>
          <view class="goods-price">总金额 ： {{item.price*item.num}}</view>

        <image class="goods-img" :src="getImageUrl(item.image)" mode="aspectFill"></image>
      </view>
    </view>

    <view class="divider"></view>
    <!-- 类型选择 -->
    <view class="form-item">
      <text class="label">类型选择</text>
      <picker
          mode="selector"
          :range="requestType"
          @change="onRequestChange"
          class="picker"
      >
        <view class="picker-content">
          {{ requestIndex === -1 ? '请选择' : requestType[requestIndex] }}
          <text class="iconfont icon-arrowright"></text>
        </view>
      </picker>
    </view>
    <!-- 退款原因 -->
    <view class="form-item">
      <text class="label">{{chooseType}}原因</text>
      <picker
          mode="selector"
          :range="reasons"
          @change="onReasonChange"
          class="picker"
      >
        <view class="picker-content">
          {{ reasonIndex === -1 ? '请选择' : reasons[reasonIndex] }}
          <text class="iconfont icon-arrowright"></text>
        </view>
      </picker>
    </view>

    <!-- 退款说明 -->
    <view class="form-item">
      <text class="label">{{chooseType}}说明：</text>
      <textarea
          v-model="description"
          placeholder="选填（建议填写具体原因）"
          class="textarea"
      />
    </view>

    <!-- 退款金额 -->
    <view class="form-item">
      <text class="label">涉及金额：</text>
      <text class="refund-amount">¥{{refundAmount}}</text>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" @click="handleSubmit">提交</button>
  </view>
</template>

<style scoped lang="scss">
.container {
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.goods-section {
  padding: 30rpx 0;
}

.goods-item {
  margin-bottom: 20rpx;
}

.goods-name {
  font-size: 32rpx;
  color: #333;
  display: block;
}

.goods-spec {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-top: 10rpx;
}

.divider {
  height: 20rpx;
  background-color: #f5f5f5;
  margin: 0 -30rpx;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.label {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.picker-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 28rpx;
  padding: 20rpx 0;
}

.icon-arrowright {
  color: #999;
  font-size: 28rpx;
}

.textarea {
  width: 100%;
  height: 150rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.refund-amount {
  color: #ff4444;
  font-size: 32rpx;
  font-weight: bold;
}

.submit-btn {
  margin-top: 60rpx;
  background: #ff4444;
  color: #fff;
  border-radius: 50rpx;
}
</style>